<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate">新增活动</a-button>
      </template>
      <template #price="{ record }">
        {{
          record.price || record.price == 0
            ? (record.symbol || '') + convert(record.price || 0)
            : ''
        }}
      </template>
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" />
      </template>
    </BasicTable>
    <Modal @register="registerModal" :id="id" @success="handleSuccess" />
  </PageWrapper>
</template>

<script lang="ts">
  import { defineComponent, toRefs, unref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { BasicTable, useTable, TableAction, BasicColumn } from '/@/components/Table';
  import { ActivityQueryApi, DeleteActivityApi } from '/@/api/merchant/index';
  import Modal from './modal.vue';
  import { useModal } from '/@/components/Modal';
  import { convert } from '/@/utils/throttle';
  const columns: BasicColumn[] = [
    {
      title: '活动名称',
      dataIndex: 'activityName',
    },
    {
      title: '价格',
      dataIndex: 'price',
      slots: { customRender: 'price' },
    },
    {
      title: '活动时间',
      dataIndex: 'activityTime',
    },
  ];
  export default defineComponent({
    name: 'Activity',
    components: { PageWrapper, BasicTable, TableAction, Modal },
    props: {
      id: {
        type: String,
        default: '',
      },
    },
    setup(props) {
      const { id } = toRefs(props);
      const [registerModal, { openModal }] = useModal();
      const [registerTable, { reload }] = useTable({
        api: getList,
        columns,
        useSearchForm: false,
        bordered: true,
        pagination: false,
        actionColumn: {
          width: 120,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });
      async function getList() {
        const res = await ActivityQueryApi({ id: unref(id) });
        if (res.data) {
          return {
            rows: res.data,
          };
        }
      }
      // 表格按钮
      function createActions(record: EditRecordRow, _: BasicColumn): ActionItem[] {
        return [
          {
            label: '编辑',
            color: 'success',
            onClick() {
              openModal(true, {
                record,
                isUpdate: true,
              });
            },
          },
          {
            label: '删除',
            color: 'error',
            popConfirm: {
              title: '确定要删除吗！',
              confirm() {
                handleDelet(record.id);
              },
            },
          },
        ];
      }
      // 新增
      function handleCreate() {
        openModal(true, {
          isUpdate: false,
        });
      }
      // 删除
      function handleDelet(id: number) {
        DeleteActivityApi(id).then((_) => {
          console.log(_);
          reload();
        });
      }
      function handleSuccess() {
        reload();
      }
      return {
        registerTable,
        createActions,
        handleCreate,
        handleSuccess,
        registerModal,
        id,
        convert,
      };
    },
  });
</script>

<style scoped></style>
